<script setup lang="ts">
import { getFollowList } from "~/api/user";
import { onMounted, ref } from "vue";

useSeoMeta({
  title: "我的关注 - 技能猴子",
  ogTitle: "我的关注 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

const queryParams = {
  pageNum: 1,
  pageSize: 10,
};
onMounted(() => {
  getList();
});
const total = ref(0);
const list = ref([]);
const getList = async () => {
  try {
    const data = await getFollowList(queryParams);
    if (data.code === 200) {
      total.value = data.total;
      list.value = data.rows;
    }
  } catch (e) {
    console.log(e);
  }
};
</script>

<template>
  <BaseHeaderMenuWhite bg-color="white" />
  <div class="my-attention">
    <h4 class="page-title">我的关注</h4>
    <div class="list">
      <MyAttentionItem
        v-for="item of list"
        :key="item.id"
        :dataItem="item"
        @reload="getList"
      />
      <el-empty
        v-if="list.length === 0"
        style="margin-top: 50px"
        description="未关注卖家~"
      ></el-empty>
    </div>
  </div>
  <BaseFooter />
</template>

<style scoped lang="scss">
.my-attention {
  padding-top: 80px;
  background: #f9f9f9;
  padding-bottom: 20px;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #191e28;
  padding: 32px 0 16px;
  width: 1100px;
  margin: 0 auto;
}
.list {
  width: 1100px;
  min-height: 500px;
  margin: 0 auto;
}
</style>
